<template>
    <!-- 右侧导航栏 -->
    <div id="banner-nav">
        <el-menu class="banner-el-menu"
                 mode="horizontal"
                 @select="handleSelect"
                 background-color="#CCC8C8"
                 text-color="#000000"
                 active-text-color="#3374F5">
            <el-submenu index="1">
                <template slot="title">
                    <!-- 头像-->
                    <span class="userlogin">
<!--                        <span id="avatar-viewer" class="avatar-viewer" title="Change the avatar">-->
                            <el-avatar size="medium" src="avatarUrl"></el-avatar>
                            welcomeUser
                        <!--                        </span>-->
                    </span>
                </template>
                <el-menu-item index="101" @click="showLoginPanel()">登陆</el-menu-item>
                <el-menu-item index="102" @click="logout()">退出</el-menu-item>
                <el-menu-item index="103" @click="linkToEdit()">编辑头像</el-menu-item>
            </el-submenu>
            <template v-for="menuItem in menuItems">
                <el-menu-item :key="menuItem.pk_menuItem">{{ menuItem.title }}</el-menu-item>
            </template>
        </el-menu>
    </div>
</template>

<script>
import AvatarCropper from "@/components/web/header/AvatarCropper";

export default {
    name: "BannerNav",
    components: {
        AvatarCropper
    },
    data() {
        return {
            menuItems: [
                {
                    title: "No-01",
                    pk_menuItem: "0001"
                },
                {
                    title: "No-02",
                    pk_menuItem: "0002"
                },
                {
                    title: "No-03",
                    pk_menuItem: "0003"
                },
            ]
        }
    },
    methods: {
        handleSelect(key, keyPath) {
            // 点击导航栏按钮时输出对应的值
            // console.log(key, keyPath);
        },
        linkToEdit() {
            window.open("/edit", "_blank");
        },
        showLoginPanel() {
            // 打开登陆面板
            // TODO 应该先判断是否已登录，如果未登录才打开面板
            this.$bus.$emit("showLoginPanel", true);
        }
    }
}
</script>

<style scoped>

#banner-nav {
    height: 100%;
}

/* 取消el-menu的底部border*/
.el-menu.el-menu--horizontal {
    border-bottom: none !important;
}

#banner-nav  * {
    font-family: 'FZSJ-TGYBXSJW', serif;
    font-size: 20px;
    font-weight: 1000;
}

</style>
